<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="content"
            placeholder="请输入设备名称、电话号码、直放站编号搜索"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="vendorOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :highlight-current="true"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:user:add']"
            >资产登记
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:user:edit']"
            >资产变更
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:user:remove']"
            >删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:user:export']"
            >导出
            </el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="assetsList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="设备ID" prop="deviceCode"/>
          <el-table-column label="设备名称" prop="deviceName"/>
          <el-table-column label="资产名称" prop="assetsName"/>
          <el-table-column label="资产编号" prop="assetsCode"/>
          <el-table-column label="资产值(元)" prop="assetsMoney"/>
          <el-table-column label="备注" prop="remark"/>
          <el-table-column
            label="操作"
            align="center"
            width="180"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:user:edit']"
              >资产变更
              </el-button>
              <el-button
                v-if="scope.row.userId !== 1"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:user:remove']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getAssetsList"
        />

        <!-- 添加或修改岗位对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="设备编号">
              <el-input v-model="form.deviceCode" disabled/>
            </el-form-item>
            <el-form-item label="设备名称">
              <el-input v-model="form.deviceName" disabled/>
            </el-form-item>
            <el-form-item label="资产名称" prop="assetsName">
              <el-input v-model="form.assetsName" placeholder="请输入资产名称"/>
            </el-form-item>
            <el-form-item label="资产编码" prop="assetsCode">
              <el-input v-model="form.assetsCode" placeholder="请输入资产编码"/>
            </el-form-item>
            <el-form-item label="资产值(单位:元)" prop="assetsMoney">
              <el-input v-model="form.assetsMoney" placeholder="请输入资产值"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'Eam',
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 用户表格数据
        assetsList: null,
        // 弹出层标题
        title: '',
        // 部门树选项
        vendorOptions: undefined,
        // 是否显示弹出层
        open: false,
        content: undefined,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          phonenumber: undefined,
          status: undefined,
          deptId: undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          assetsName: [
            { required: true, message: '资产名称不能为空', trigger: 'blur' }
          ],
          assetsCode: [
            { required: true, message: '资产编码不能为空', trigger: 'blur' }
          ],
          assetsMoney: [
            { required: true, message: '资产值不能为空', trigger: 'blur' }
          ]
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    created() {
      this.getTreeselect()
      this.getAssetsList()
    },
    methods: {
      /** 查询部门下拉树结构 */
      getAssetsList() {
        this.loading = true
        this.assetsList = [{
          deviceCode: '136942',
          deviceName: '澳门理工学院',
          assetsName: '设备主机',
          assetsCode: '1111',
          assetsMoney: '',
          remark: ''
        }]
        this.total = this.assetsList.length
        this.loading = false
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        this.vendorOptions = [{
          'id': 100,
          'label': '澳门',
          'children': [{
            'id': 101,
            'label': '澳门理工',
            'children': [{ 'id': 102, 'label': '澳门理工学院' }]
          }]
        }]
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.deptId = data.id
        this.getAssetsList()
      },
      // 表单重置
      reset() {
        this.form = {
          deviceCode: '136942',
          deviceName: '澳门理工学院',
          assetsName: undefined,
          assetsCode: undefined,
          assetsMoney: undefined,
          remark: undefined
        }
        this.resetForm('form')
      },
      /** 资产登记按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = '资产登记'
      },
      /** 资产变更按钮操作 */
      handleUpdate(row) {
        this.reset()
        this.form = row
        this.open = true
        this.title = '资产变更'
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.msgSuccess('修改成功')
            this.open = false
            this.getAssetsList()
          }
        })
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.userId)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const postIds = row.postId || this.ids
        this.$confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.msgSuccess('删除成功')
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams
        this.$confirm('是否确认导出所有用户数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return exportUser(queryParams)
        }).then(response => {
          this.download(response.msg)
        }).catch(function() {
        })
      }
    }
  }
</script>

<style scoped>
  /*>>> .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {*/
  /*  color: rgb(64, 158, 255);*/
  /*  background-color: transparent;*/
  /*}*/
  >>> .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #cce6ff;
  }
</style>
